<template>
  <div :style="{ width: props.width, height: props.height }">
    <el-carousel
      :style="{ width: props.width, height: props.height }"
      v-bind="states"
    >
      <el-carousel-item
        :style="{ width: props.width, height: props.height }"
        v-for="item in states.data"
        :key="item"
      >
        <el-image
          :style="{ width: props.width, height: props.height }"
          :src="item"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
let options = ref<any[]>([]);
watch(
  () => props.responseData,
  () => {
    if (props.responseData) {
      init();
    }
  },
  {
    deep: true,
  }
);
onMounted(() => {
  if (props.responseData && props.responseData.length > 0) {
    options.value = props.responseData as any;
  } else {
    options.value = props.models.data;
  }
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

const init = () => {
  options.value = props.responseData as any;
};
</script>

<style scoped lang="scss"></style>
